<script setup>

import {Pointer} from "@element-plus/icons-vue";
const emits = defineEmits(['changeBoxIndex'])
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  titles: {
    type: Array,
    default: []
  }
})

const boxIndex = ref(0)

const changeBoxIndex = (index) => {
  boxIndex.value = index
  emits('changeBoxIndex', index)
}
</script>

<template>
  <el-card>
    <div class="header">
      <div class="title" v-if="titles.length == 0">
        <p  v-if="title != ''">{{title}}</p>
        <slot v-else name="title-cont"></slot>
      </div>
      <div class="titles" v-if="titles.length > 0">
        <p v-for="(item,index) in titles" :class="[boxIndex == index ? 'active' : '']" @click="changeBoxIndex(index)">{{item}}</p>
      </div>
      <div class="btns">
        <slot name="btn-cont"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content" v-if="titles.length === 0"></slot>
      <div v-if="titles.length > 0">
        <div :class="[boxIndex === index ? 'showBox' : 'hideBox']" v-for="(item,index) in 10">
          <slot :name="'content' + item" ></slot>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.showBox{
  display: block;
}
.hideBox{
  display: none;
}
.content{
  margin-top: 20px;
}
.header{
  display: flex;
  justify-content: space-between;
  border-bottom: 5px solid #f5f5f5;
  padding-bottom: 5px;
  .titles{
    font-size: 20px;
    font-weight: bolder;
    position: relative;
    display: flex;

    p{
      cursor: pointer;
      color: #a4a4a4;
      position: relative;
      margin: 0 20px 0 0;
      &:after{
        content: '';
        display: inline-block;
        width: 100%;
        height: 5px;
        background: #a4a4a4;
        border-radius: 5px;
        position: absolute;
        bottom: -10px;
        left: 0;
      }
    }
    .active{
      color: #000;
      &:after{
        background: #000;
      }
    }
  }
  .title{
    font-size: 20px;
    font-weight: bolder;
    position: relative;
    &:after{
      content: '';
      display: inline-block;
      width: 100%;
      height: 5px;
      background: #000;
      border-radius: 5px;
      position: absolute;
      bottom: -10px;
      left: 0;
    }
  }
}
</style>
